<template>
  <div class="app-container table-app-container table-report">
    <div class="fixed-table">
      <div class="fixed-table-actionbar">
        <div class="search-bar">
          <el-form :inline="true" :model="formSearch" class="form-filter" size="mini" @submit.native.prevent>
            <el-form-item>
              <el-date-picker
                v-model="formSearch.s_dateRange"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="截止日期"
                unlink-panels
                @change="fetch"
              />
            </el-form-item>
          </el-form>
        </div>
        <div class="action-bar">
          <el-button type="text" @click="download('excel')"><el-image style="width: 16px; height: 16px" :src="excelIcon" fit="fill" /></el-button>
          <el-button type="text" @click="download('pdf')"><el-image style="width: 16px; height: 16px" :src="pdfIcon" fit="fill" /></el-button>
        </div>
      </div>
      <div class="title">省联社机关部门资产盘点报表</div>
      <el-table
        v-loading="loading"
        border
        size="mini"
        show-summary
        :summary-method="getSummaries"
        :data="insideTableData"
        class="fixed-table-table"
      >
        <el-table-column type="index" width="50" label="序号" />
        <el-table-column label="盘点时间" prop="start_time" header-align="center" align="center" />
        <el-table-column label="盘点责任人" prop="principal" header-align="center" align="center" />
        <el-table-column label="盘点计划" prop="department_name" header-align="center" align="center" />
        <el-table-column label="需盘点资产总数" prop="asset_count" header-align="center" align="center" />
        <el-table-column label="未盘点资产数" prop="wait_count" header-align="center" align="center" />
        <el-table-column label="已盘点资产数" header-align="center">
          <el-table-column label="盘平数量" prop="equality_count" header-align="center" align="center" />
          <el-table-column label="盘亏数量" prop="loss_count" header-align="center" align="center" />
          <el-table-column label="盘盈数量" prop="gain_count" header-align="center" align="center" />
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import databind from '@neu/biz-core/mixins/databind'
import { getToken } from '@neu/biz-core/utils/auth'
import { inventoryStats as list, exportInventoryReportExcel, exportInventoryReportPdf } from '@neu/dcam-ui/api/assetStats'

const excelIcon = require('./image/excel.png')
const pdfIcon = require('./image/pdf.png')

export default {
  name: 'AssetInventoryReportPage',
  components: {
  },
  // 加入混入，使表格混入更多的api操作
  mixins: [databind],
  data() {
    return {
      formSearch: {
        s_dateRange: []
      },
      excelIcon,
      pdfIcon,
      headers: {
        'Access-Control-Allow-Origin': '*',
        'Authentication': getToken()
      }
    }
  },
  computed: {
  },
  created() {
    this.fetch()
  },
  methods: {
    fetch() {
      this.loading = true
      const params = {}
      if (this.formSearch.s_dateRange && this.formSearch.s_dateRange.length > 0) {
        params.s_dateRangeFrom = this.formSearch.s_dateRange[0]
        params.s_dateRangeTo = this.formSearch.s_dateRange[1]
      }
      list(params).then(response => {
        this.insideTableData = this.responseFormatter(response.data)
      }).finally(() => {
        this.loading = false
      })
    },
    responseFormatter: function(data) {
      return data
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        if (index === 2 || index === 3) {
          sums[index] = ''
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
        }
      })
      return sums
    },
    download(contentType) {
      const API = contentType === 'excel' ? exportInventoryReportExcel : exportInventoryReportPdf
      const params = {}
      if (this.formSearch.s_dateRange && this.formSearch.s_dateRange.length > 0) {
        params.s_dateRangeFrom = this.formSearch.s_dateRange[0]
        params.s_dateRangeTo = this.formSearch.s_dateRange[1]
      }
      this.loading = true
      API()(params).then(response => {
        this.loading = false
        const content = response.data
        const fileName = response.headers['content-disposition'].split('filename=')[1]
        const blob = new Blob([content])
        // const fileName = '导出信息.xlsx'
        if ('download' in document.createElement('a')) { // 非IE下载
          const elink = document.createElement('a')
          elink.download = decodeURIComponent(fileName)
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
        } else { // IE10+下载
          navigator.msSaveBlob(blob, fileName)
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .table-report {
    padding: 40px;
    .title {
      text-align: center;
      margin-bottom: 20px;
      font-size: 24px;
    }
    .el-table th {
      background-color: rgb(217,234,211);
      color: #000000;
      border-bottom: 1px solid #aeb2b5;
    }

    .el-table thead.is-group th {
      background: rgb(217,234,211);
    }

    .el-table--border th, .el-table--border td {
      border-right: 1px solid #aeb2b5;
    }
    .el-table td {
      border-bottom: 1px solid #aeb2b5;
    }

    .el-table--border {
      border-bottom: 1px solid #aeb2b5;
    }
  }

  .table-app-container .fixed-table .el-table th {
    border-top: 1px solid #aeb2b5;
  }

  .table-app-container .fixed-table .el-table {
    border-left: 1px solid #aeb2b5;
    border-right: 1px solid #aeb2b5;
  }
</style>
